<!-- 雷达图 -->
<template>
  <el-card>
    <template #header>
      <el-button v-if="index === 0" type="primary" @click="initData(7)"
        >7天内预约动态曲线</el-button
      >
      <el-button v-else @click="initData(7)">7天内预约动态曲线</el-button>
      <el-button v-if="index === 1" type="primary" @click="initData(14)"
        >14天内预约动态曲线</el-button
      >
      <el-button v-else @click="initData(14)">14天内预约动态曲线</el-button>
    </template>
    <div :id="id" :class="className" :style="{ height, width }"></div>
  </el-card>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { getRecentBookingDataAPI } from "@/api/dashboard/index";
const props = defineProps({
  id: {
    type: String,
    default: "radarChart",
  },
  className: {
    type: String,
    default: "",
  },
  width: {
    type: String,
    default: "200px",
    required: true,
  },
  height: {
    type: String,
    default: "200px",
    required: true,
  },
});

const options = {
  animationDuration: 5000,
  tooltip: {
    trigger: "axis",
  },
  grid: {
    top: "20%",
    left: "2%",
    right: "2%",
    bottom: "10%",
  },
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: "line",
      smooth: true,
    },
  ],
};

const index = ref(0);
const initData = (num = 7) => {
  if (num === 7) {
    index.value = 0;
  }
  if (num === 14) {
    index.value = 1;
  }
  getRecentBookingDataAPI(num).then((res) => {
    options.xAxis.data = res.data.dataTime;
    options.series[0].data = res.data.lineData;
    initEcharts();
  });
};

const initEcharts = () => {
  const chart = echarts.init(
    document.getElementById(props.id) as HTMLDivElement
  );
  chart.setOption(options);

  window.addEventListener("resize", () => {
    chart.resize();
  });
};

onMounted(() => {
  initData();
});
</script>
